<h3>描述</h3>
<p>路径选择模板页面示例展示：</p>
<p>该模板页面为服务展示 pathField 和 pathList 组件如何结合使用（该用例仅做简单参考，实际场景需要各服务根据各自业务进行处理）。</p>
<h3>导入</h3>
<p>import {{ '{' }} TpPathModule {{ '}' }} from '@cloud/path';</p>
<p>import {{ '{' }} TiButtonModule, TiModalModule, TiTableModule, TiCheckgroupModule, TiPaginationModule {{ '}' }} from '@cloud/tiny3';</p>
<p>import {{ '{' }} TpIconModule {{ '}' }} from '@cloud/tinyplus3';</p>
<h3>示例</h3>
<!-- 路径展示区域 -->
<div class="path-select-container">
  <div class="path-select-label">{{pathValue}}</div>
  <ti-path-list [items]="TiPathListItems" [clearable]="true" (clear)="onPathListClear($event)"></ti-path-list>
</div>
<!-- 路径选择按钮 -->
<button class="path-select-button" (click)="showModal(myModal)" tiButton>select</button>

<!-- 弹窗内容模板 -->
<ng-template #myModal let-context="context">
  <!-- 弹框头部定义 -->
  <ti-modal-header> {{context.name}} </ti-modal-header>
  <!-- 弹框内容定义 -->
  <ti-modal-body>
    <ti-path-field style="margin-bottom: 16px" [items]="TiPathFieldItems" [isPanel]="false" (pathChange)="onPathfieldChange()">
    </ti-path-field>
    <!--tiTable实现对表格的整体配置-->
    <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns" class="path-select-table">
      <!--通过原生table实现表格的表头和表体-->
      <table>
        <thead>
          <tr>
            <!--使用复选框时，需要给复选框列加 checkbox-column 属性-->
            <th checkbox-column>
              <!--全选按钮-->
              <!--如果有分页，全选需要控制当前页时，items接口传入displayed
                                如果全选要控制表格所有数据，items接口传入srcData.data-->
              <input type="checkbox" tiCheckgroup [items]="displayed" [(checkeds)]="checkedList" />
            </th>
            <th tiOverflow *ngFor="let column of columns" width="{{column.width}}">{{column.title}}</th>
          </tr>
        </thead>
        <tbody *ngIf="displayed.length > 0">
          <!--注意:ngFor中的displayed数据与displayedData传入的数据一致, 初始化设置为[]即可-->
          <tr *ngFor="let row of displayed">
            <!--使用复选框时，需要给复选框列加 checkbox-column 属性-->
          </tr>
          <tr *ngFor="let row of displayed" (dblclick)="onTrDblclick(row)">
            <!--使用复选框时，需要给复选框列加 checkbox-column 属性-->
            <!--从10.1.2版本开始，点击radio所在的单元格可以选中或者取消选中
                            并且可以使用ti3-disabled-cell样式为复选框所在的单元格添加禁用样式-->
            <td
              checkbox-column
              [ngClass]="{
                            'ti3-disabled-cell': row.disabled}"
            >
              <input type="checkbox" tiCheckitem [disabled]="row.disabled" [item]="row" />
            </td>
            <td tiOverflow>
              <tp-icon class="ti-pathList-icon" [name]="row.type === 'file' ? 'cloud-action-folder' : 'cloud-action-report'"> </tp-icon>
              {{row.label}}
            </td>
            <td tiOverflow>{{row.time}}</td>
            <td tiOverflow>{{row.size}}</td>
          </tr>
        </tbody>
        <tbody *ngIf="displayed.length === 0">
          <tr class="ti3-table-nodata-simple">
            <td tiColspan>{{noDadaInfo}}</td>
          </tr>
        </tbody>
      </table>
      <!--tiPagination实现分页功能-->
      <!-- 在表格中使用分页组件时必须保证其父元素是ti-table -->
      <ti-pagination [(currentPage)]="currentPage" [pageSize]="pageSize" [(totalNumber)]="displayed.length"> </ti-pagination>
    </ti-table>
  </ti-modal-body>
  <!-- 弹框底部定义:
        1.弹框样式可结合tiButton组件自定义，可根据是否设置color="danger"区分主要和次要按钮
        2.弹框的关闭事件需要自定义，其中close和dismiss事件是通过ng-template上下文传递的  -->
  <ti-modal-footer>
    <button type="button" autofocus (click)="context.close()" tiButton>确定</button>
    <button type="button" (click)="context.dismiss()" tiButton>取消</button>
  </ti-modal-footer>
</ng-template>

<style>
  .path-select-container {
    border: 1px solid #adb0b8;
    border-radius: 2px;
    padding: 10px;
    min-height: 160px;
    width: 300px;
    background: #fff;
    display: inline-block;
    margin-right: 8px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  .path-select-table tr {
    cursor: default;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .path-select-label {
    margin-bottom: 10px;
  }
  .path-select-button {
    vertical-align: top;
  }
</style>
